scraper-tasks-c {
  margin-top: 1rem;
  /* Note: Here we define the bkg in variable because we use it in the .th
						so that we can use the css-grid for the header and rows of the datagrid
	*/
  --content-bkg: var(--bkg-app);
  background: var(--content-bkg);

  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  color: var(--txt-70);

  /* Little visual trick for the first row */
  scraper-task-row:first-of-type > * {
    margin-top: 0.1rem;
  }

  scraper-task-row {
    display: grid;
    grid-auto-rows: min-content;

    &.anim-delete {
      & > * {
        color: var(--txt-red);
        opacity: 0.5;
        transform: scale(0);
        transform-origin: left;
        transition-property: transform, opacity;
        transition-duration: 0.5s;
      }
    }

    .H9lube {
      background-color: #f1f3f4;
      border: 1px solid #ecedef;
      border-radius: 50%;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: 26px;
      width: 26px;
      margin-right: 12px;
    }

    a:hover h3.LC20lb {
      text-decoration: underline;
    }
    .MBeuO {
      font-family: arial, sans-serif;
      font-size: 20px;
      font-weight: 400;
    }

    master {
      display: grid;
      grid-template-columns: max-content auto;
      grid-template-rows: max-content auto;

      logo {
        grid-row: 1 / span 2;
        grid-column: 1;
        margin: 0.1rem;
        height: 18px;
        width: 18px;
      }

      .title {
        grid-row: 1;
        grid-column: 2;
      }

      ops {
        grid-row: 2;
        grid-column: 2;
        a.url {
          color: white;
        }
        a.action {
          color: var(--clr-prime-500);
        }
      }
    }

    detail {
      display: flex;
      align-items: center;
      b {
        float: left;
        white-space: nowrap;
      }
      p {
        text-align: justify;
      }
    }
  }
}
